<template>
   <div class="table">

 <div class="btn">
    <el-button size="small" @click="add">添加</el-button>
    <el-button size="small" type="danger" @click="del">批量删除</el-button>
 </div>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column label="商品" width="240">
            <template #default="scope">
                <div class="flex">
                    <img :src="scope.row.image"
                        alt="" class="w-10 h-10">
                    <div class="flex-1 flex flex-col">
                        <span>{{ scope.row.name }}</span>
                        <span class="text-gray-400" style="font-size: 12px;">分类:{{ scope.row.active }}</span>
                        <span class="text-gray-400" style="font-size: 12px;">创建时间:{{ scope.row.timer }}</span>
                    </div>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="sales" label="实际销量" width="120" >
            <template #default="scoped">
                {{ scoped.row.sales }}杯
            </template>
            </el-table-column>
        <el-table-column prop="shelfOrNot" label="是否上架">
            <template #default="scoped">
                <el-switch v-model="scoped.row.shelfOrNot" />
            </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="120">
            <template #default="scoped">
                ￥{{ scoped.row.price }}
            </template>
            </el-table-column>
        <el-table-column prop="inventory" label="总库存" width="220" >
            <template #default="scoped">
                {{ scoped.row.inventory }}杯
            </template>
            </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
            <template #default="scoped">
                <el-button link type="danger" size="small" @click="handleClick(scoped.row)">删除</el-button>
                <el-button link type="primary" size="small" @click="update(scoped.row)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>
   </div>
   <!-- 遮遭层 -->
   <Drawer :DrawerMessage="DrawerMessage"></Drawer>
</template>
  
<script setup>
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import {getList,removeList} from "../API/index"
import emitter from '../mitt/index';

import { reactive, ref, toRaw, watch } from 'vue';
import Drawer from './Drawer.vue';
const tableData = reactive([])
// 传递遮遭层
let DrawerMessage = reactive({isflag:true,title:''})
// 获取数据
let getCommonity =async ()=>{
    tableData.splice(0,tableData.length)
    let {data} =  await getList()
   
    data.map(item=>{
        tableData.push(Object.assign(item,{shelfOrNot:true}))
    })
  

}

getCommonity()
// 添加
const add = ()=>{
    DrawerMessage.title='添加'
    emitter.emit('DrawerMessage',toRaw(DrawerMessage))
}
// 删除
const handleClick=async (item)=>{
    ElMessageBox.confirm(
    `确定删除${item.name}吗？`,
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
        let data  =await removeList({id:item.id})
      ElMessage({
        type: 'success',
        message: `删除${item.name}成功`,
      })
      getCommonity()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消',
      })
    })

    
}
// 修改
const update =async (item)=>{
    // let data = await updateList({id:item.id,context})
    DrawerMessage.title='修改'
    emitter.emit('DrawerMessage',{DrawerMessage:toRaw(DrawerMessage),context:item})
}
// 更新数据
emitter.on('updateTable',()=>{
    getCommonity()
})




</script>

<style scoped>
    .table{
        margin-top: 40px;
    }
    .btn{
        margin-bottom: 20px;
    }
</style>